<template>
    <div>
        <div class="tab2">
            <a-tabs default-active-key="1" @change="callback">
                <a-tab-pane key="1" tab="课程描述">
                    <div v-html="list.courseDetail"></div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="目录" force-render>
                    <div style="padding: 30px">
                        <ul>
                            <li v-for="(item,index) in list.sections" :key="index">
                                <h2><span style="margin-right: 4px">{{index+1}}.</span>{{item.sectionName}}</h2>
                                <div>
                                    <ul class="course">
                                        <li v-for="(item1,index1) in item.subSections" :key="index1"
                                            @mouseenter="changeSpan(item1.sectionId)" @mouseleave="changeSpan('')">
                                            <span>{{index+1}}-{{index1+1}}</span> <span>{{item1.sectionName}}</span>
                                            <span style="float: right" v-if="list.isFree==1">
                                            <span v-if="sectionId == item1.sectionId">试看</span>
                                            <a-icon type="play-circle" v-else/></span>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="评论">
                    <div style="padding: 30px">
                        <div class="course-scoure">
                            <p>评论</p>
                            <span>
                            <a-rate v-model="value" :tooltips="desc"/>
                             <span class="ant-rate-text">{{ desc[value - 1] }}</span>
                            </span>
                        </div>

                        <div>
                            <a-textarea placeholder="请发表您对课程的评价" :rows="4"
                                        style="height: 136px; min-height: 136px; max-height: 136px; overflow-y: hidden; "/>
                            <a-button type="primary" style="margin: 20px 0px 20px 1000px;">
                                发表评论
                            </a-button>
                            <div>
                                <a-comment style="border-top: 1px solid #eeeeee" v-for="(item,index) in commontList" :key="index">
                                    <div slot="actions" style="width: 1000px;" key="comment-nested-reply-to">
                                        <span style="float: right;">{{item.createdTime}}&nbsp;&nbsp; &nbsp;&nbsp;<span class="ready" style="margin-left: 10px;">回复</span></span>
                                    </div>
                                    <div slot="author" style="width: 1000px;">{{item.user.nickname}}
                                        <a-rate :default-value="5" disabled  style="float: right;"/>
                                    </div>

                                    <a-avatar
                                            slot="avatar"
                                            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                            alt="Han Solo"
                                    />
                                    <p slot="content">
                                        {{item.commentContent}}
                                    </p>
                                    <a-comment v-for="(item1,index) in Children" :key="index">
                                        <span slot="actions">Reply to</span>
                                        <a slot="author">{{item1.user.nickname}}</a>
                                        <a-avatar
                                                slot="avatar"
                                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                                alt="Han Solo"
                                        />
                                        <p slot="content">
                                            {{item1.commentContent}}
                                        </p>

                                    </a-comment>
                                </a-comment>

                            </div>
                            <a-pagination :current="current" :total="commontList.length" @change="onChange" style="text-align: center;"/>
                        </div>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>
    </div>
</template>
<script>
    import {getComment} from "../api/api";

    export default {
        name: "tab2",
        data() {
            return {
                flag: false,
                value: 3,
                desc: ['差', '一般', '不错', '好', '很好'],
                sectionId: "",
                Children: [],
                commontList: [],
                current:0
            }

        },
        props: {
            list: {
                type: Array,
                default: function () {
                    return []
                }
            },
            courseId: {
                type: String,
                default:function () {
                    return ""
                }
            }

        },
        methods: {
            callback(key) {
                console.log(key);
            },
            changeSpan(a) {
                this.sectionId = a;
                // console.log(this.sectionId)
            },
            onChange(current) {
                this.current = current;
            },
        },
        created() {
            getComment(this.courseId).then(res => {
                console.log(res)
                this.commontList = res.rows;
            })
        }
    };
</script>
<style lang="less" scoped>
    .tab2 {
        width: 1200px;
        margin: 20px auto 50px;
        background-color: white;
        padding: 10px 20px;
    }

    .course {

        li {
            font-size: 14px;
            height: 50px;
            line-height: 30px;
            padding: 10px 20px;
            background: #f2f2f2;
            margin: 10px 0;
        }

        li:hover {
            color: #42b983;
        }

    }

    .course-scoure {
        font-size: 14px;
        margin-bottom: 10px;

        p {
            margin: 0;
        }
    }

    .comment-list {
        margin-top: 40px;
    }
    .ready:hover{
        color: #42b983;
    }
</style>